<!-- @include ./inc/header.html -->

<header class="g-header">
  <img class="sun" src="/@@/images/m/icon_sun.png" alt="">
  <div class="g-title">
    <h3>定制案例</h3>
    <span>custom case</span>
  </div>
</header>
<main class="main case-detail-main">
<!-- @include ./inc/case_list.html -->
</main>

<!-- @include ./inc/footer.html -->
<link href="//cdn.bootcss.com/fancybox/3.2.5/jquery.fancybox.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/fancybox/3.2.5/jquery.fancybox.min.js"></script>

<script>
$(function() {
  $('#case-droplist').on('touchend', function () {
    var $this = $(this)
    var active = $this.hasClass('is-active')
    if (active) {
      $this.removeClass('is-active').find('.droplist').slideUp(300)
    } else {
      $this.addClass('is-active').find('.droplist').slideDown(300)
    }
  })

  $('[data-view-case]').on('click', function () {
    var $this = $(this), imgs = []
    var _arr = $this.siblings('input').val().split(',')
    _arr.pop()
    if (_arr.length === 0) {
      return alert('暂未上传图片')
    }
    _arr.forEach(function (v, k) {
      imgs.push({
        src: v
      })
    })
    $.fancybox.open(imgs, {
      loop: false,
      caption: $this.attr('data-title'),
      buttons: ['fullScreen', 'thumbs', 'close']
    })
  })
})
</script>
<!-- @include ./inc/end.html -->